<!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>通过name查找</title>
</head>
<body>
<div id="app">
    <table border="1px" width="800px">
        <tr>
            <th>编号</th>,<th>姓名</th>,<th>年龄</th>,<th>性别</th>,<th>身份证号</th>,<th>住址</th>
        </tr>
        <tr v-for="stu in students">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
            <td>{{stu.gender}}</td>
            <td>{{stu.idcard}}</td>
            <td>{{stu.address}}</td>
        </tr>
    </table>
</div>
<!--导入Vue的js文件-->
<script src="js/vue.min.js"></script>
<!--导入axios的js文件-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //创建Vue
    new Vue({
        el:"#app",
        data:{
            students:[]//学生集合
        },
        methods:{
            //连接后台，加载学生数据
            loadStudents(){
                //调用axios的get方法，get/post/delete/put向后台发出请求
                //then是处理数据
                axios.post("http://localhost:8080/test2?name=熊")
                    .then(result=>{
                        console.log(result.data)
                        if(result.data.data){
                            //绑定后台的数据到前面的模型中
                            this.students=result.data.data;
                        }

                    });
            }
        },
        //组件挂载完成后调用加载学生方法
        mounted() {
            this.loadStudents();
        }
    })
</script>
</body>
</html></title>
</head>
<body>

</body>
</html>